﻿(function($) {
    $.sw = $.sw || {};
    $.fn.extend({
        Layout: function(options) {
            return this.each(function() {
                new $.sw.layout(this, options);
            });
        }
    });
    $.sw.layout = function(container, options) {
        // setup configuration
        this.options = options = $.extend({}, $.sw.layout.defaults, options);
        this.element = container;
        var elementArray = [];
        $(container).addClass("sw-container");
        if (options.header) {
            $(options.header).addClass("sw-header");
            elementArray.push($(options.header));
        }
        if (options.nav) {
            $(options.nav).addClass("sw-nav");
            elementArray.push(options.nav);
        }
        if (options.main.id) {
            $(options.main.id).addClass("sw-main");
        }
        if (options.footer) {
            $(options.footer).addClass("sw-footer");
            elementArray.push(options.footer);
        }
        var size = Sw.Size.fromElement(window)
        size.applyTo(document.body);
        size.applyTo(container);
        size.applyWidthTo(options.main.id);
        var mainSize = new Sw.Size(size.width, (size.height - Sw.Size.fromArray(elementArray, 2).height));
        mainSize.applyHeightTo(options.main.id);
        //layout
        //如果右边有菜单，大家可以扩展
        if (options.main.left) {
            $(options.main.left.id).sidebar({ id: options.main.left.id, centerContainer: options.main.center.id, region: "left" }, options.main.id);
            //alert($(options.main.id).html())
        }

    };
    $.extend($.sw.layout, {
        defaults: {
            header: "#sw-header",
            nav: "#sw-nav",
            main:
            {
                id: "#sw-main",
                left:
                {
                    id: "#leftside",
                    title: "主菜单"
                },
                center:
                {
                    id: "#centercontent"
                }
            },
            footer: "#sw-footer"
        }
    });
    $.fn.sidebar = function(options, parent) {
        var op = $.extend({ id: "#leftside", centerContainer: "#centercontent", region: "left", title: "左边菜单" }, options);
        return this.each(function() {
            var me = this;
            //这时只是初步实现,以后会优化 
            var size = Sw.Size.fromElement(parent);
            if ($("#"+ op.region + "Sidebar").html() == null) {
                //bar
                var bar = $("<div/>").attr("id", op.region + "Sidebar").height(size.height - 2).append($(me).html()).prependTo($(me).empty());
                var barCollapse = $("<div/>").addClass("toggleCollapse").append($("<h2/>").html(op.title)).prependTo(bar);
                var barToggle = $("<div/>").text("收缩").appendTo(barCollapse);
                $(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 2);
                barToggle.click(function() {
                    bar.hide();
                    barClone.show();
                    $(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 2);
                });
            }
            if ($("#"+ op.region + "SidebarClone").html() == null) {
                //bar clone
                var barClone = $("<div/>").attr("id", op.region + "SidebarClone").hide().prependTo(me);
                var barCloneCollapse = $("<div/>").addClass("collapse").height(size.height - 2).append("<div class='toggleCollapse'><div></div></div>").prependTo(barClone);
                barCloneCollapse.click(function() {
                    bar.show();
                    barClone.hide();
                    $(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 2);
                });

            }
        });


    }

})(jQuery);